<template>
	<view class="page">
<!-- 				<view class="userinfo-box2" style="position: relative; height: 300px;">
					<view class="">
						<image style="width: 100%;height: 500rpx;" :src="weburl+hditem.photo" mode=""></image>
					</view>
				</view> -->	
			<view class="news_active" v-for="(hditem,hdindex) in huodong" @click="navToUrl('/pages/article/huodong?id='+hditem.id)">
				
					<view class="">
						<image style="width: 100%;height: 350rpx;" :src="weburl+hditem.photo" mode=""></image>
					</view>
				
				<view class="active">{{ hditem.status === 0 ? '进行中' : '已结束' }}</view>
				<view class="new_tit">{{hditem.title}}</view>
				<view class="new_date">
					<p>开始时间：{{hditem.begintime}}</p>
					<p>结束时间：{{hditem.endtime}}</p>
				</view>
			</view>
			
			<view class="zx_tit">精选活动项目</view>
			<view class="huodonglist">
				<view class="list"  v-for="(item, index) in tabList" :key="index" @click="navToUrl('/pages/invest/huodong?id='+item.id)">
					<view class="list_img"><img :src="weburl+item.img" /> </view>
					<view class="list_cont">
						<view class="title">
							<view>{{ item.title }}</view>
							<view>周期：{{ item.day }}天</view>
						</view>
						<view>金额：{{ item.min }}元</view>
						<view class="tipe">
							<view>抽奖：{{ item.point }}次</view>
							<view>收益：￥{{ item.min * item.rate / 100 }}/天</view>
						</view>
						<view class="tipe">
							<view>积分：{{ item.day_jifen }}</view>
							<view>红包：{{ item.red }}</view>
						</view>
					</view>
				</view>
			</view> 
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			tabBar,
			uniPopupDialog
		},
		
		data() {
			return {
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				tabList:[],
				currentPage: '/pages/user/person',
				ifOnShow: false,
				huodong:[],
			};
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.getData();
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if (currPage.$vm.bank_id){
				this.bank_id = currPage.$vm.bank_id;
				// this.loadData();
			}
		},
		onLoad: function(option) {
			 this.getData();
			 //this.getNews();
		},
		methods: {
			//user数据
			getData: function() {
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['token='+info.token,'timestamp=' + timestamp]);
					this.helper.req({
						api: "getlongContracts",
						timestamp: timestamp,
						data:{token:info.token},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
							this.huodong = res.data.data.list.data;
							this.tabList = res.data.data.projectlist;
							console.log('活动列表',this.tabList)
						uni.hideLoading();
					})
				} else {
					uni.hideLoading();
				}
			},
	
			// //资讯
			// getNews:function(){
			// 	let timestamp = this.helper.now();
			// 	let sign = this.helper.setSign(['timestamp=' + timestamp]);
			// 	this.helper.req({
			// 		api: "getNewsList",
			// 		timestamp: timestamp,
			// 		header: {
			// 			sign: sign
			// 		},
			// 		method: 'GET',
			// 	}).then(res => {
			// 		//console.log(res)
			// 		this.list = res.data.data.lista;
			// 	})
			// },	
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		font-size: 3.46667vw;
		min-width: 325px;
		color: #56595d;
		background-color: #ddeafd;
		padding-bottom: 16px;
	}
	.huodonglist{
		.list{
			display: flex;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 0 30rpx;
			margin-bottom: 20rpx;
			.list_img{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				img{
					position: absolute;
					left: 0;
					top:0;
					width: 100%;
					height: 100%;
				}
			}
			.list_cont{
				margin-left: 30rpx;
				width: 460rpx;
				.title{
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					view{
						color: #4d8efd;
					}
				}
				.tipe{
					display: flex;
					justify-content: space-between;
					margin-bottom: 5rpx;
				}
			}
		}
	}
	.my_padding {

	}
	
	.news_active{
		height: 85vw;
		padding: 10px;
		width: 94vw;
		background: #fff;
		margin: 3vw;
		border-radius: 8px;
		position: relative;
	}
	.active{
		position: absolute;
		top: 380rpx;
		left: 10px;
		line-height: 24px;
		padding: 2px 10px;
		font-size: 14px;
		border:1px solid #d4244e;
		color:#d4244e;
		border-radius:6px;
	}
	.new_tit{
		position: absolute;
		top: 450rpx;
		left: 10px;
		width: 280px;
		line-height: 40px;
		font-weight: bold;
		font-size: 16px;
	}
	.new_date{
		position: absolute;
		top: 33vh;
		left: 10px;
		width: 200px;
		height: 30px;
		line-height: 20px;
		font-size: 14px;
		color:#999;
	}
	.new_contain{
		position: absolute;
		top: 130px;
		left: 10px;
		width: 340px;
		height: 30px;
		line-height: 20px;
		font-size: 15px;
		padding: 10px;
		color:#666;
	}
	
	.zx_tit{
		padding: 20rpx 0;
		font-size: 16px;
		font-weight: bold;
		width: 96vw;
		color: #4f8efd;
		margin-left: 3vw;
		text-align: center;
	}
	.zx_list{
		// height: 50vw;
		padding: 10px;
		width: 94vw;
		background: #fff;
		margin: 3vw;
		border-radius: 8px;
	}
	.zx_item{
		height: 25vw;
		width: 100%;
		border-bottom: 1px solid #EEE;
		display: flex;
		margin-bottom: 20px;
	}
	.zx_item image{
		// height: 50px;
		// width: 100px;
		width: 45vw;
		height: 20vw;
		float: left;
	}
	.zx_contain{
		width: 66vw;
		height: 20vw;
		line-height: 24px;
		padding: 0px 10px;
		font-size: 15px;
		float: left;
	}
	
	.inviteRecode{
		line-height: 30px;
		padding: 6px 0;
		height: 42px;
		width: 60%;
		position: absolute;
		bottom: -20px;
		left: 20%;
		color:#fff;
		background-color: #fea829;
		font-size: 14px;
		text-align: center;
		border-radius: 8px;
	}
	
	.invite_now{
		line-height: 30px;
		padding: 6px 0;
		height: 42px;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		color:#fff;
		background-color: #fea829;
		font-size: 14px;
		text-align: center;
	}
	
	.invite_img{
		width: 40px;
		height: 40px;
	}
	.grid-item-box text{
		line-height: 20px;
		display: inherit;
		font-size: 14px; 
		color:#333;
	}
	
	.newuser{
		min-height: 800px;
		position: relative;
	}
	
	.invite_regular{
		position: absolute;
		top: 360px;
		left:4%;
		width: 92%;
		height: 200px;
		color: #fff;
		font-size: 14px;
	}
	.regular_tit{
		font-size: 15px;
		font-weight: bold;
		line-height: 30px;
	}
	.regular_contain p{
		font-size: 14px;
	}
	
	.checkTeam{
		position: fixed;
		top: 56px;
		right: 0;
		padding: 6px 10px 6px 16px;
		line-height: 20px;
		font-size: 16px;
		background: #fea829;
		color:#fff;
		border-radius:16px 0 0 16px;
	}
	.tab-bar {
		width: 96vw;
		height: 32vw;
		margin: 2vw 2vw;
		position: relative;
		
		.info_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #72d1f9;
			opacity: 0.3;
			border-radius:10px;
		}
		
		.item_image{
			width: 32vw;
			height: 32vw;
			padding: 4vw;
			float: left;
			image{
				width: 24vw;
				height: 24vw;
			}
		}
		.item_r{
			float: right;
			width: 64vw;
			height: 30vw;
			padding: 2vw 2vw 2vw 0;
			color:#fff;
			.item_tit{
				line-height: 36px;
				font-size: 15px;
				font-weight: bold;
				width: 58vw;
				height: 36px;
				overflow: hidden;
			}
			.item_contain{
				line-height: 20px;
				font-size: 13px;
				width: 62vw;
				height: 60px;
				display: -webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:3; /* 定义文本的最大行数 */
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.item_date{
				line-height: 24px;
				font-size: 14px;
				width: 58vw;
				text-align: right;
			}
		}
	}
	.tab_item{
		width: 96vw;
		height: 36vw;
		padding: 3vw;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		
		.tab_con1{
			width: 28%;
			height: 100px;
			padding-top: 10px;
			image{
				width: 70px;
				height: 70px;
				border-radius: 35px;
			}
		}
		.tab_con2{
			width: 50%;
			height: 80px;
			color:#fff;
			font-size: 12px;
			p{
				line-height: 20px;
			}
			
			.tab_title{
				font-size: 12px;
				line-height: 18px;
				padding: 0 0 10px;
				padding-right: 8px;
			}
		}
		.tab_con3{
			width: 32%;
			height: 80px;
			color:#fff;
			font-size: 12px;
			margin-top: 16px;
			p{
				line-height: 20px;
			}
			.tab_prod{
				font-size: 15px;
				padding: 0 0 10px;
				color: #7AE6FF;
			}
		}
	}
	
</style>
